<template>
  <div>
    <div v-if="loading" style="margin-top: 180px">
      <dv-loading >Waiting...</dv-loading>
    </div>
    <div>
      <div ref="chart" style="width: 90%; height: 300px;margin-left:0px;margin-top: 100px"></div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts';

export default {
  data() {
    return {
      chart: null,
      //设置我们的加载状态
      loading: true,
    };
  },
  // eslint-disable-next-line no-undef
  // mixins: [echartMixins]
  mounted() {
    //绑定我们的状态修改全局事件
    this.$bus.$on('chanLoadingTrainState', () => {
      this.loading = false
    })
    this.$bus.$on('chanLoadingTrainState', () => {
      this.loading = false
    })
    this.$bus.$on('getTrainData', (data) => {
      var processData = this.processTrainData(data)
      this.renderChart(processData);

    })

  },
  // beforeDestroy() {
  //   // 组件被销毁了，不能进行数据传输
  //   // 解绑事件
  //   this.$bus.$off('getTrainData')
  // },
  methods: {
    processTrainData(datas) {


      let extractedData = [
        {
          name: 'accuracy',
          value: (datas.accuracy * 100).toFixed(2),
        },
        {
          name: 'macro avg f1-score',
          value: (datas["macro avg"]["f1-score"] * 100).toFixed(2),
        },
        {
          name: 'weighted avg f1-score',
          value: (datas["weighted avg"]["f1-score"] * 100).toFixed(2),
        },
      ];

      return extractedData;
    },
    renderChart(processTrainData) {

      let chartData = processTrainData

      let option = {
        xAxis: {
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {show: false},
          axisLine: {
            show: false,
          },
        },
        grid: {
          top: 0,
          bottom: 0,
          left: '5%',
        },
        yAxis: {
          inverse: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              padding: [-15, 0, 35, 18],
            },
            // formatter(value, index) {
            //   let str = '',
            //     num = 'TOP' + (index + 1);
            //   if (index === 0) {
            //     str = '{a| ' + num + '}{title| ' + value + '}';
            //   } else if (index === 1) {
            //     str = '{b| ' + num + '}{title| ' + value + '}';
            //   } else if (index === 2) {
            //     str = '{c| ' + num + '}{title| ' + value + '}';
            //   } else {
            //     str = '{d| ' + num + '}{title| ' + value + '}';
            //   }
            //   return str;
            // },
            rich: {
              a: {
                borderColor: '#EE6F7C',
                borderWidth: 1,
                borderRadius: [0, 10, 10, 0],
                padding: [3.5, 10, 1, -13],
                backgroundColor: 'rgba(238, 111, 124, 0.8)',
              },
              b: {
                borderColor: '#FFCF5F',
                borderWidth: 1,
                borderRadius: [0, 10, 10, 0],
                padding: [3.5, 10, 1, -13],
                backgroundColor: 'rgba(255, 207, 95, 0.7)',
              },
              c: {
                borderColor: '#00E8FF',
                borderWidth: 1,
                borderRadius: [0, 10, 10, 0],
                padding: [3.5, 10, 1, -13],
                backgroundColor: 'rgba(0, 232, 255, 0.7)',
              },
              d: {
                borderColor: '#1A90FF',
                borderWidth: 1,
                borderRadius: [0, 10, 10, 0],
                padding: [3.5, 10, 1, -13],
                backgroundColor: 'rgba(26, 144, 255, 0.7)',
              },
              title: {
                padding: [0, 0, 0, 3],
              },
            },
            align: 'left',
          },
          data: chartData.map((item) => item.name),
        },
        series: [
          {
            type: 'pictorialBar',
            symbol: 'rect',
            symbolRotate: 30,
            symbolRepeat: 'fixed',
            symbolClip: true,
            symbolOffset: [0, -1.5],
            symbolSize: [2, 12],
            symbolMargin: '3',
            itemStyle: {
              normal: {
                color: '#000726',
              },
            },
            label: {
              show: true,
              color: '#fff',
              fontFamily: 'Bebas',
              fontSize: 12,
              offset: [-9, -1.5],
              position: 'right',
              formatter(params) {
                let result = '';
                switch (params.dataIndex) {
                  case 0:
                    result = '{img|}{index0|' + params.value + '}{unit|分}';
                    break;
                  case 1:
                    result = '{img|}{index1|' + params.value + '}{unit|分}';
                    break;
                  case 2:
                    result = '{img|}{index2|' + params.value + '}{unit|分}';
                    break;
                  default:
                    result = '{img|}{index3|' + params.value + '}{unit|分}';
                    break;
                }
                return result;
              },
              rich: {
                img: {
                  height: 18,
                  width: 20,
                  // backgroundColor: { image: arrow }, 这个图片自己切，这里上传不了（加了一个尾巴的形状）
                },
                unit: {
                  color: '#fff',
                  fontSize: 11,
                },
                index0: {
                  color: '#ee6f7c',
                  fontFamily: 'Bebas',
                  padding: [-2, 2, 0, 0],
                },
                index1: {
                  color: '#ffcf5f',
                  fontFamily: 'Bebas',
                  padding: [-2, 2, 0, 0],
                },
                index2: {
                  color: '#00e8ff',
                  fontFamily: 'Bebas',
                  padding: [-2, 2, 0, 0],
                },
                index3: {
                  color: '#fff',
                  fontFamily: 'Bebas',
                  padding: [-2, 2, 0, 0],
                },
              },
            },
            symbolBoundingData:
                Math.max(...chartData.map((item) => item.value)) * 1.3,
            data: chartData.map((item) => item.value),
            z: 2,
          },
          {
            type: 'bar',
            barWidth: 10,
            data: chartData.map((item) => item.value),
            itemStyle: {
              normal: {
                color: '#00F7F0',
              },
            },
            z: 1,
          },
          {
            type: 'bar',
            barGap: '-125%', // 设置外框粗细
            data: chartData.map(
                // eslint-disable-next-line no-unused-vars
                (items) =>
                    Math.max(...chartData.map((item) => item.value)) * 1.3
            ),
            barWidth: 15,
            itemStyle: {
              color: 'none',
              borderColor: 'rgba(64, 245, 245, 0.5)',
            },
            z: 0,
          },
        ],
      };

      const chart = echarts.init(this.$refs.chart);
      chart.setOption(option);
    }
  },


}
;
</script>

<style>
/* Add any custom styles here */
</style>
